<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="解决方案">
          <el-descriptions-item label="步骤1">
            <i class="el-icon-circle-check"></i>
            el-select 的v-model支持绑定对象 userStore.modelValue。  (此时的bug则是未匹配到, 最后一项被选中了)
          </el-descriptions-item>
          <el-descriptions-item label="步骤2">
            <i class="el-icon-circle-check"></i>
            还需要再添加属性value-key="id", 根据id来匹配显示。  (此时若接口报错, userStore.list 返回不了, select还是未显示 userStore.modelValue 里面的name)
          </el-descriptions-item>
          <el-descriptions-item label="步骤3">
            <i class="el-icon-circle-check"></i>
            自定义el-select-patch 组件继承自el-select, 在el-select里面复制一个getOption方法源码, 粘贴到el-select-patch中调正getOption,
            el-select-patch里定义一个label-key, 添加到 getOption 里的逻辑就可以了。
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-form-item label="审批人" label-width="80px" prop="userId">
            <el-select-patch clearable v-model="userStore.modelValue" value-key="id" label-key="name">
              <el-option
                v-for="(item, index) in userStore.data"
                :key="index"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select-patch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>

         <code>
           form: {{ form }}
           <br/>
           userStore.modelValue: {{ userStore.modelValue }}
           <br/>
           userStore.data: {{ userStore.data }}
        </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import ElSelectPatch from '@/components/ElSelectPatch.vue';
export default {
  name: "Solution",
  components: {
    ElSelectPatch
  },
  data() {
    const cxt = this
    return {
      userStore: {
        modelValue: {}, 
        data: [],
      },
      form: {
        // 访问器属性动态读取值
        get userId() {
          return cxt.userStore?.modelValue?.id || ''
        },
        get userName() {
          return cxt.userStore?.modelValue?.name || 0
        }
      },
      rules: {
        // 注意： formItem 的props 校验字段 跟form里面的字段保持一致, 不需要跟selet的v-model绑定字段一致
        userId: [{required: true, message: '审批人不能为空', trigger: 'change'}],
      },
    };
  },
  mounted() {
    this.getDetail(); // 500ms后返回
    this.getUserList(); // 1s后返回
  },
  methods: {
    submit() {
      this.$refs.formRef.validate((valid) => {
        valid ?
         this.$message.success('校验成功, 开始提交') :
         this.$message.error('校验失败, 不能提交')
      })
    },
    async getDetail() {
      const res = await this.getDetailApi();
      this.userStore.modelValue = res?.user|| {};
    },
    async getUserList() {
      const res = await this.getUserApi();
      this.userStore.data = res || [];
    },
    getDetailApi() {
      const data = {
        user: {
          id: 195,
          name: "王强",
        },
      };
      return new Promise((resolve, reject) =>
        setTimeout(() => resolve(data), 500)
      );
    },
    getUserApi() {
      const data = [
        { id: 194, name: "张鑫越",  },
        { id: 195, name: "王强",  },
        { id: 196, name: "李刚",  },
      ];
      return new Promise((resolve, reject) =>
        setTimeout(() => resolve(data), 2000)
      );
    },
  },
};
</script>

<style scoped>
.el-icon-circle-check {
  color: #42b883;
  margin-right: 6px;
}
</style>
